<template>
  <div class="date-picker-demo">
    <h2>切换周选择和月选择</h2>
    <a-date-picker
      :type="datepickerType"
      :week-start="1"
      :max="new Date()"
      format="yyyy/MM/dd"
      v-model="rdate"
      placeholder="请选择时间"
      show-lunar
      color-style="light"
    >
      <div slot="footer" class="date-picker-footer">
        <div @click="onChange('week')">自然周</div>
        <div @click="onChange('month')">自然月</div>
      </div>
    </a-date-picker>
    <h2>作为日历使用</h2>
    <a-picker v-model="pickerData"></a-picker>
    <a-week-month-switch-picker
      v-model="rWeekMonth"
    ></a-week-month-switch-picker>
  </div>
</template>

<script>
export default {
  name: "date-picker-demo",
  props: {},

  data() {
    return {
      datepickerType: "week",
      rdate: [],
      pickerData: "",
      rWeekMonth: [],
    };
  },

  computed: {},

  watch: {},

  methods: {
    onChange(v) {
      this.datepickerType = v;
    },
  },

  created() {},

  mounted() {},

  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.date-picker-demo {
}
</style>
